<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>父节点和子节点</title>
		<style type="text/css">
			#div1
			{
				width: 500px;
				height: 500px;
				background-color: aqua;
				margin: auto;
			}
			#div2
			{
				width: 400px;
				height: 400px;
				background-color: aquamarine;
				margin: auto;
			   
			}
			#div3
			{
				width: 300px;
				height:300px;
				background-color:indianred;
                margin: auto;
			}
			#div4
			{
				width: 200px;
				height:200px;
				background-color:navy;
			    margin: auto;
			}
			
		</style>
	</head>
	<body>
		<!-- 4.制作4个嵌套DIV ，要求：
		      1.每个父DIV尺寸必须大于子DIV
		      2.实现每个DIV在父DIV正中间
		      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
		      4.通过最底层DIV，打印每层父DIV，如：
			1级父元素为（），1级父节点为（）
			2级父元素为（），2级父节点为（）
			 	....
			 5.查找每个DIV的子元素和子节点-->
			<div id="div1">
				<p>这是第一个div</p>
				<div id="div2">
					这是第二个div
					<div id="div3">
						这是第三个div
						<div id="div4">
							这是第四个div
						</div>
					</div>
				</div>
			</div>
	</body>
	<script type="text/javascript">
	var div1 =document.getElementById('div1');
	var div2 =document.getElementById('div2');
	var div3 =document.getElementById('div3');
	var div4 =document.getElementById('div4');
		console.log(div4.parentElement);
		console.log(div4.parentElement.parentElement);
		console.log(div4.parentElement.parentElement.parentElement);
		console.log(div4.parentNode);
		console.log(div4.parentNode.parentNode);
		console.log(div4.parentNode.parentNode.parentNode);
		
		console.log(div1.children);
		console.log(div1.childNodes);
		
		console.log(div2.children);
		console.log(div2.childNodes);
		
		console.log(div3.children);
		console.log(div3.childNodes);
		
	</script>
</html>
